import React from 'react'
import { Button, Form, Input, DatePicker, Table, Switch, message, Spin } from "antd"
import { PlusOutlined, DeleteOutlined, SearchOutlined, EditOutlined } from "@ant-design/icons"
import "./index.css"
//引入添加商品的api
import * as http from "@/api";
import Dialog from "@/components/ProductManagement/Dialog"
class ProductList extends React.Component {
    constructor() {
        super()
        let _this = this;
        this.rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: (record) => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            })
        }
        this.state = {
            dialogVisible: false,
            actionType: "添加商品",
            tableLoading: true,
            columns: [
                {
                    title: '商品编号',
                    dataIndex: 'product_id',
                    align: 'center'
                },
                {
                    title: '商品名称',
                    dataIndex: 'productName',
                    align: 'center'
                },
                {
                    title: '商品价格',
                    dataIndex: 'price',
                    align: 'center'
                },
                {
                    title: '是否上架',
                    dataIndex: 'onSell',
                    align: 'center',
                    render(switched, row) {
                        return <Switch onChange={_this.sellSwitchChange.bind(_this, row, switched)} />
                    }
                },
                {
                    title: '加入时间',
                    dataIndex: 'updateTime',
                    align: 'center'
                },
                {
                    title: "操作",
                    dateIndex: 'operation',
                    align: 'center',
                    render(row) {
                        return (
                            <div className="action_button">
                                <Button type="primary" onClick={_this.edit.bind(_this, row)} icon={<EditOutlined />}></Button>
                                <Button type="primary" onClick={_this.delete.bind(_this, row)} danger icon={<DeleteOutlined />}></Button>
                            </div>
                        )
                    }
                }
            ],
            dataSource: [

            ],
        }
    }
    //是否上架切换按钮
    sellSwitchChange(row, switched) {
        console.log(row)
    }
    // 选择日期时触发的事件
    onDateChange() {

    }
    //编辑按钮
    edit(row) {
        console.log(row)
    }
    //删除按钮
    delete(row) {
        console.log(row)
    }
    //添加按钮
    addProduct() {
        this.setState({
            dialogVisible: true
        })
    }

    //渲染表格数据

    updateProductList(product_id = "") {
        http.getProduct(product_id)
            .then(res => {
                // console.log(res)
                this.setState({  //关闭表格的加载
                    tableLoading: false
                })
                if (res.data.state) {
                    //映射处理之后的数据,加了key字段
                    let dataSource = res.data.data.map(item => {
                        return {
                            key: item.product_id,
                            ...item
                        }
                    })

                    //获取成功
                    this.setState(
                        {
                            dataSource
                        }
                    )
                }
            })
    }

    componentDidMount() { //组件挂载之后
        this.updateProductList()
    }


    //dialog完成的时候 添加商品
    handleAddProduct(param) {
        console.log(param)
        http.addProduct(param)
            .then(res => {
                // console.log(res)
                if (res.data.state) {
                    //添加成功
                    //关闭dialog
                    this.hideDialog()
                    //更新表格
                    this.updateProductList()
                } else {
                    message.error(res.data.msg)
                }
            })
    }

    //关闭dialog
    hideDialog() {
        this.setState({
            dialogVisible: false
        })
    }
    render() {

        return (
            <div className="list_container">
                <Dialog onCancel={this.hideDialog.bind(this)} onAddProduct={this.handleAddProduct.bind(this)} dialogVisible={this.state.dialogVisible} actionType={this.state.actionType}></Dialog>
                <div className="tip">
                    <p className="tip_top">操作提示</p>
                    <ul>
                        <li>1.该页展示了商城所有的商品信息,可对商品进行修改操作</li>
                        <li>2.商家添加商品后,需要耍新页面才能看到最新商品</li>
                    </ul>
                </div>
                {/* 中间操作部分 */}
                <div className="operation">
                    <div className="button">
                        <Button type="primary" onClick={this.addProduct.bind(this)} icon={<PlusOutlined />}>添加商品</Button>
                        <Button type="primary" danger icon={<DeleteOutlined />}>批量删除</Button>
                    </div>
                    <div className="search">
                        <Form>
                            <Form.Item label="商品内容">
                                <Input placeholder="商品名称/编号" />
                            </Form.Item>
                            <Form.Item label="添加时间">
                                <DatePicker placeholder="选择日期" onChange={this.onDateChange.bind(this)} />
                            </Form.Item>
                            <Button icon={<SearchOutlined />} type="primary">查询</Button>
                        </Form>
                    </div>
                </div>
                {/* 表格部分 */}
                <div className="table">
                    <Table
                        loading={this.state.tableLoading}
                        bordered
                        rowSelection={this.rowSelection}
                        columns={this.state.columns}
                        dataSource={this.state.dataSource}>
                    </Table>
                </div>
            </div>
        )
    }
}

export default ProductList